<template>
	<view class="message-wrapper" v-if="msg.data != false">
		<msg-item v-for="(item, index) in msg.data" :key="index" :info="item"></msg-item>
		<uni-load-more v-if="msg.data.length >= 10" :status="loadStatus"></uni-load-more>
	</view>
	<empty-status v-else note="消息列表为空" src="/static/images/msg-empty.png"></empty-status>
</template>

<script>
	import msgItem from './components/msg-item.vue'
	export default {
		components: {
			msgItem
		},
		data() {
			return {
				loadStatus: 'more',
				msg: {
					data: [],
					page: 1,
					hasMore: false
				}
			}
		},
		onLoad() {
			this.getMsgList()
		},
		onReachBottom() {
			if (this.msg.hasMore) {
				this.msg.page += 1
				this.getMsgList()
			} else {
				this.loadStatus = 'noMore'
			}
		},
		methods: {
			async getMsgList(refresh = false) {
				const res = await this.$request.get('/api/message/lists',{page: this.msg.page})
				if (res.code == 200) {
					this.loadStatus = 'more'
					const list = res.data.lists
					this.msg.hasMore =  res.data.has_more_page
					if (refresh) {
						this.msg.data = list
						this.msg.page = 1
					} else {
						this.msg.data = this.msg.data.concat(list)
					}
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
<style scoped lang="scss">
	.message-wrapper {
		padding: 24rpx 30rpx;
	}
</style>